<template>
  <div class="hello">
    <el-row>
      <el-col :span="6">
        <div style="display: flex">
          <el-input
              v-model="billcode"
              style="max-width: 600px"
              placeholder="请输入单据编号"
          >
            <template #prepend>单据编号</template>
          </el-input>
          <el-button :icon="Search" />
          <el-button :icon="CircleClose" />
        </div>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="6">
        <div style="display: flex">
          <el-input
              v-model="barcode"
              style="max-width: 600px;"
              placeholder="请输入商品条码"
          >
            <template #prepend>商品条码</template>
          </el-input>
          <el-button :icon="Search" />
          <el-button :icon="CircleClose" />
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="6">
        <el-input
            v-model="imeiArr"
            style="max-width: 600px"
            :autosize="{ minRows: 20, maxRows: 20 }"
            type="textarea"
            placeholder="请扫描电子监管码"
            @keyup.enter="iemiChange"
            :autofocus="true"
        />
      </el-col>
      <el-col :span="1"></el-col>

      <el-col :span="6" class="color-class" >
        <div style="display: flex;">
          <el-input
              v-model="form.goodsname"
              style="max-width: 600px"
              placeholder="商品名称"
              disabled
          >
            <template #prepend>商品名称</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="form.goodsspec"
              style="max-width: 600px;color: red;"
              placeholder="商品规格"
              disabled
          >
            <template #prepend>商品规格</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="form.manufacturer"
              style="max-width: 600px"
              placeholder="商品名称"
              disabled
          >
            <template #prepend>生产厂家</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="form.batchcode"
              style="max-width: 600px"
              placeholder="批号"
              disabled
          >
            <template #prepend>批&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="form.locatname"
              style="max-width: 600px"
              placeholder="货位"
              disabled
          >
            <template #prepend>货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="zbarcodenum"
              style="max-width: 600px"
              placeholder="需扫数量"
              disabled
          >
            <template #prepend>需扫数量</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="ybarcodenum"
              style="max-width: 600px"
              placeholder="已扫数量"
              disabled
          >
            <template #prepend>已扫数量</template>
          </el-input>
        </div>
        <div class="display-10">
          <el-input
              v-model="wbarcodenum"
              style="max-width: 600px"
              placeholder="未扫数量"
              disabled
          >
            <template #prepend>未扫数量</template>
          </el-input>
        </div>
        <div class="display-10 buttons-class">
          <el-button type="danger" size="large" @click="clearImeiArr">清&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空</el-button>
          <el-button type="success" size="large" @click="saveImei">保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { CircleClose } from '@element-plus/icons-vue'
// import { useRoute } from 'vue-router';
// const fullUrl = window.location.origin + route.fullPath;
// const route = useRoute();
// const fullUrl = window.location.origin + route.fullPath;

const fullUrl = window.location.href;
const url = new URL(fullUrl);
const searchParams = new URLSearchParams(url.search);

let imeiArr = ref('')
const billcode = ref(searchParams.get('billcode'));
const billno = ref(searchParams.get('billno'));
const billsn = ref(searchParams.get('billsn'));
const barcode = ref(searchParams.get('barcode'));
// const billcode = ref(route.query.billcode || '');
// const billNo = ref(route.query.billno || '');
// const billSn = ref(route.query.billsn || '');
const form = reactive({})
form.goodsname = searchParams.get('goodsname');
form.goodsspec = searchParams.get('goodsspec');
form.manufacturer = searchParams.get('manufacturer');
form.batchcode = searchParams.get('batchcode');
form.locatname= searchParams.get("locatname");
form.goodsid = searchParams.get('goodsid');
form.angleid = searchParams.get('angleid');

let ybarcodenum = ref(0)
const zbarcodenum = ref(searchParams.get('zbarcodenum'))
const wbarcodenum = ref(0)
onMounted(()=>{
  compBarCodeNum();
  // let goodsinfo = {};
  // goodsinfo.goodsname = "双氯芬酸钠气雾剂";
  // goodsinfo.goodsspec = "30g";
  // goodsinfo.manufacturer = "广东同德药业有限公司";
  // goodsinfo.batchcode = "20240609";
  // Object.assign(form,goodsinfo);
})
const iemiChange = async (event) =>{
  let inputLines = event.target.value.split('\n');
  inputLines = inputLines.filter(item => item.length === 20 || item === '' || (item.length === 13 && item.startsWith('0'))) ;
  let imeiList = inputLines.slice(); // 复制数组
  imeiList = [...new Set(imeiList)]; // 去重
  imeiArr.value =  imeiList.join('\n');
  ybarcodenum.value = imeiList.length-1;
  compBarCodeNum();
  if(wbarcodenum.value==0){
    await saveImei()
  }
}
const compBarCodeNum = () =>{
  wbarcodenum.value = zbarcodenum.value - ybarcodenum.value;
}
const clearImeiArr = () =>{
  imeiArr.value = "";
  ybarcodenum.value= 0;
  compBarCodeNum();
}

const saveImei = async ()=>{
  let params = {};
  params.billno = billno.value;
  params.billsn = billsn.value;
  params.billcode = billcode.value;
  params.imeiarr = imeiArr.value;
  // console.log(params);
  await postData();
}

const postData = async  () =>{
  let params = {};
  params.P_BILLCODE = billcode.value;
  params.P_BILLSN = billsn.value;
  params.P_BILLNO = billno.value;
  params.P_IMEIARR = imeiArr.value;
  params.P_PROC_NAME = "PROC_PC_DO_IMEI";
  params.P_ACTION = "ADD";
  params.P_SIGN = "111111111111111111";
  params.P_YSNUM = ybarcodenum.value;
  params.P_GOODSID = form.goodsid;
  params.P_ANGLEID = form.angleid;
  //
  try {
    const response = await fetch('http://120.46.135.233:9533/ydh/noCall', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(params)
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    if(data.code===200){
      window.close();
    }
  } catch (error) {
    console.error('Error posting data:', error);
  }
}

</script>

<style scoped>
.hello{
  transform: scale(1.75); /* 缩放150% */
  transform-origin: left top; /* 设置缩放的原点 */
}

.button-container el-button {
  margin-left: 5px; /* 按钮之间的间距 */
}
.el-button+.el-button {
  margin-left: 0px !important;
}

.color-class{
  color: red !important;
}

.display-10{
  display: flex;margin-top: 10px
}
>>> .el-input.is-disabled .el-input__inner {
  color: red !important;
  -webkit-text-fill-color: red !important;
}
>>> .el-input-group__prepend{
  color: red !important;
}
.buttons-class{
  display: flex;
  justify-content: space-between;
}
</style>
